<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/layouts/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户活跃统计</title>
    <%@include file="/WEB-INF/layouts/index-header.jsp" %>
    <script src="${staticPath}/commons/echarts/echarts.js" type="text/javascript"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row" style="padding:15px;">
        <div id="tool">
            <form id="searchForm" class="form-inline">
                <div class="form-group">
                    <label class="">时间类型：</label>
                    <select class="form-control" onchange="dateChange(this)" id="dateType">
                        <option value="day">按天</option>
                        <option value="month">按月</option>
                        <option value="year">按年</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="">用户活跃时间：</label>
                    <input class="t-datetimepicker form-control" id="startTime" value="${startDate}"/> -
                    <input class="t-datetimepicker form-control" id="endTime" value="${endDate}"/>
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-primary radius" onclick="generatingChart()">
                        生成
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div id="newAccount" style="width: 100%;height:400px;padding-top: 30px"></div>
</div>

<div class="container-fluid hidden-xs" style="margin-top: -80px">
    <h4 style="text-align: center;padding-bottom: 20px;font-weight: bold;color: #262626"
        id="tableTitle">${titleStartDate}-${titleEndDate} 活跃用户详情</h4>
    <table id="table"></table>
</div>
</div>
<script type="text/javascript">
    window.parent.changeTitle('用户活跃统计');
    var myChart;
    var myTableTitle;
    $(function () {
        $('.t-datetimepicker').datetimepicker({
            language: 'zh-CN',
            autoclose: true,
            format: "yyyy-mm-dd",
            startView: 2,
            minView: 2,
        });
        var mainHeight = $(window).height() * 0.8;
        $('#newAccount').height(mainHeight < 350 ? 350 : mainHeight);
        // 基于准备好的dom，初始化echarts实例
        myChart = echarts.init(document.getElementById('newAccount'));
        getData('${ctx}/admin/report/getActiveAccounts?startTime=' + $('#startTime').val() + '&endTime=' + $('#endTime').val() + '&type=' + $('#dateType').val());

        myChart.on('click', function (param) {
            initTable("", "", param.name);
            var name = param.name;
            var val = $('#dateType').val();
            switch (val) {
                case "day":
                    $('#tableTitle').text(name.substr(0, 10) + " 号活跃用户详情");
                    break;
                case "month":
                    $('#tableTitle').text(name.substr(0, 7) + " 月活跃用户详情");
                    break;
                case "year":
                    $('#tableTitle').text(name.substr(0, 4) + " 年活跃用户详情");
                    break;
            }
        });

        initTable("", "", "");
    });

    function dateChange(This) {
        var val = $(This).val();
        $('.t-datetimepicker').datetimepicker('remove');
        $('#startTime').val('');
        $('#endTime').val('');
        if (val === 'month') {
            $('.t-datetimepicker').datetimepicker({
                format: "yyyy-mm",
                language: 'zh-CN',
                autoclose: true,
                startView: 3,
                minView: 3,
            });
        } else if (val === 'year') {
            $('.t-datetimepicker').datetimepicker({
                format: "yyyy",
                language: 'zh-CN',
                autoclose: true,
                startView: 4,
                minView: 4,
            });
        } else {
            $('.t-datetimepicker').datetimepicker({
                format: "yyyy-mm-dd",
                language: 'zh-CN',
                autoclose: true,
                startView: 2,
                minView: 2,
            });
            $('.t-datetimepicker').datetimepicker('setStartDate', '2018');
        }
    }

    function getData(url) {
        $.get(url, function (resp) {
            var option = {
                // Make gradient line here
                visualMap: {
                    show: false,
                    type: 'continuous',
                    seriesIndex: 0,
                    min: 0,
                    max: 0,
                },
                title: {
                    left: 'center',
                    text: resp.body.title
                },
                tooltip: {
                    trigger: 'axis',
//                    formatter: "{b}<br/>{c}台新安装设备"
                },
                xAxis: {
                    data: resp.body.dates
                },
                yAxis: {
                    splitLine: {show: false}
                },
                grid: {
                    bottom: '30%',
                    //height: 350
                },
                series: {
                    name: '用户活跃',
                    type: 'line',
                    showSymbol: false,
                    symbolSize: 10,
                    label: {
                        normal: {
                            show: true,
                            formatter: "查看用户",
                        }

                    },
                    smooth: true,
                    sampling: 'average',
                    itemStyle: {
                        normal: {
                            color: 'rgb(255, 70, 131)'
                        }
                    },
                    data: resp.body.counts,
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(255, 158, 68)'
                            }, {
                                offset: 1,
                                color: 'rgb(255, 70, 131)'
                            }])
                        }
                    },
                }
            };
            var title = resp.body.title;
            if (title) {
                var dateType = $('#dateType').val();
                switch (dateType) {
                    case "day":
                        myTableTitle = title.substr(0, 23);
                        break;
                    case "month":
                        myTableTitle = title.substr(0, 17);
                        break;
                    case "year":
                        myTableTitle = title.substr(0, 11);
                        break;
                    default:
                        break;
                }
            }
            myChart.setOption(option);
            $('#tableTitle').text(myTableTitle + " 活跃用户详情");
        }, 'json');
    }

    function initTable(start, end, chartDate) {
        $('#table').bootstrapTable('destroy').bootstrapTable({
            url: '${ctx}/admin/app-user/activeAccountPageList?startDate=' + start + "&endDate=" + end + "&chartDate=" + chartDate + "&dateType=" + $('#dateType').val(),
            idField: 'id',
            striped: true,
            pagination: true,
            pageNumber: 1,
            pageSize: 15,
            sidePagination: 'server',
            uniqueId: 'id',
            mobileResponsive: true,
            checkbox: true,
            clickToSelect: true,
            queryParams: queryParams,
            responseHandler: responseHandler,
            columns: [
                {
                    title: '#',
                    width: 50,
                    align: 'center',
                    formatter: snFormatter
                },
                {
                    field: 'username',
                    title: '用户名',
                    align: 'center'
                },
                {
                    field: 'realName',
                    title: '真实姓名',
                    align: 'center'
                },
                {
                    field: 'tel',
                    title: '电话',
                    align: 'center'
                },
                {
                    field: 'email',
                    title: '邮箱',
                    align: 'center'
                },
                {
                    field: 'gender',
                    title: '性别',
                    align: 'center',
                    formatter: function (value, row, index) {
                        if (value === 'Male') {
                            return "男";
                        } else if (value === 'Female') {
                            return "女";
                        } else {
                            return "未知";
                        }
                    }
                },
                {
                    field: 'role',
                    title: '角色',
                    align: 'center',
                    formatter: function (value, row, index) {
                        if (value === 'Admin') {
                            return "管理员";
                        } else {
                            return "普通用户";
                        }
                    }
                }]
        });
    }

    function generatingChart() {
        var startDate = $('#startTime').val();
        var endDate = $('#endTime').val();
        if (startDate != "" && endDate != "") {
            getData('${ctx}/admin/report/getActiveAccounts?startTime=' + startDate + '&endTime=' + endDate + '&type=' + $('#dateType').val());
            initTable(startDate, endDate, "");
        }

    }

</script>
</body>
</html>